<template>
    <input type="text" name="" id="" @blur="updateList" @keyup.enter="updateList"
    placeholder="please entry your plane"
    >
  
</template>

<script lang="ts">
import { defineComponent ,reactive,ref} from "vue";
export default defineComponent({
    name:'Header',
    props: {
        addList: {
            type: Function,
            required: true
        }
    },
    setup(props) {
        function updateList(e) {
            if (!e.target.value) return
            let list = {
                id: Date.now(),
                title: e.target.value,
                isSelect: false
            }
            // add datas to addList
            props.addList(list)
            // empty target content
            e.target.value = ''
        }
        return {
            updateList
        }
    }

})
</script>

<style scoped>
input {
    width: 500px;
    height: 30px;
    border-color: black;
    border-radius: 1px;
    padding: 0 5px;
}
</style>